<template>
	<view class="concent">
		<view>
			<view class="page-section page-section-gap">
				<map id="myMap" style="width: 100%; height: 280px;" :latitude="latitude" :longitude="longitude"
					:markers="markers" @poitap="poitap" show-location></map>
			</view>
		</view>
		<view style="display: flex; justify-content: space-around; padding: 2.5%; text-align: center;">
			<view class="distance" style="width: 55%;">
				<text>摄影师目前距您XXX米</text>
			</view>
			<view class="distance" style="width: 30%;">
				取消订单
			</view>
		</view>

		<!-- 联系和拍摄时间 -->
		<view class="block">
			<view class="contact">
				<view class="left">
					<u--image src="/static/聊一聊.png" width="160rpx" height="70rpx" mode="aspectFit"></u--image>
				</view>
				<view class="right">
					<text>有问题请咨询我摄影师</text>
					<u--image src="/static/logo.png" shape="circle" width="80rpx" height="80rpx" mode="aspectFit"
						@click="showCard"></u--image>
				</view>
			</view>
			<view class="shootingTime">
				<view class="left">
					<u--image src="/static/拍摄时间.png" width="160rpx" height="70rpx" mode="aspectFit"></u--image>
				</view>
				<view class="right">
					<text @click="showCalendar=true" v-if="shootingTime===''">点击滑动选择拍摄时间</text>
					<text @click="showCalendar=true" v-else>{{shootingTime}}</text>
				</view>
			</view>
		</view>
		<!-- 预约日历 -->
		<c-calendar 
			:formatter="formatter" 
			:show="showCalendar" 
			@confirm="confirm" 
			@close="close" 
			ref="calendar" />
		<!-- 预约详情 -->
		<u-popup :show="modelDetails.show" mode="top">
			<view class="popu">
				<view class="title">{{ modelDetails.date }}</view>
				<view class="content">
					<view class="row" v-for="(item, index) in modelDetails.info" :key="index">
						<view class="item">
							<u--text :type="item ? 'error' : 'success'" :text="!index ? '早' : (index === 1 ? '中' : '晚')" />
						</view>
						<view class="item" v-if="item">
							<u-tag type="error" text="已满" />
						</view>
						<view class="item">
							<u-tag type="success" @click="change(item, index)" text="预约" />
						</view>
					</view>
				</view>
				<u-button type="warning" @click="modelDetails.show = false" text="取消"></u-button>
			</view>
		</u-popup>
		<!-- 预约已满，用户强制预约 -->
		<u-modal
			content="此时段摄影师已安排拍摄任务，若预约此时段订单大概率被摄影师拒绝，请谨慎预约。"
			:show="checkChange"
			showCancelButton
			@confirm="change"
			@cancel="() => checkChange = false"
		></u-modal>
		<!-- 弹窗联系卡 -->
		<template>
			<u-popup closeable @close="closeCard()" :show="cardState" mode="bottom">
				<view class="dialogCard">
					<view class="photoText">电 话：12345678910</view>
					<view class="wxText">
						<text>微 信：</text>
						<u--image src="https://cdn.uviewui.com/uview/swiper/swiper3.png" width="80px" height="80px"
							shape="square"></u--image>
					</view>
					<u-button text="平台消息联系" type="primary" @click="contactShop(1)"></u-button>
				</view>
			</u-popup>
		</template>

		<!-- 约拍信息 -->
		<view class="info">
			<u--form labelPosition="left" :model="autonomouslyInfo" :rules="rules" ref="uForm">
				<u-form-item label="类    型:" prop="type" borderBottom ref="item1">
					<u-radio-group v-model="radiovalue1" placement="column" @change="groupChange">
						<u-radio :customStyle="{marginBottom: '8px'}" v-for="(item, index) in radiolist" :key="index"
							:label="item" :name="item" shape="square" @change="radioChange(index)">
						</u-radio>
					</u-radio-group>
				</u-form-item>

				<u-form-item label="姓    名:" prop="name" borderBottom ref="item1">
					<u--input v-model="autonomouslyInfo.name" placeholder="请输入姓名" border="surround"
						clearable></u--input>
				</u-form-item>
				<u-form-item label="联系电话:" prop="phone" borderBottom ref="item1">
					<u--input type="number" v-model="autonomouslyInfo.phone" placeholder="请输入联系方式" border="surround"
						clearable></u--input>
				</u-form-item>
				<u-form-item label="上    传:" prop="upload" borderBottom ref="item1">
					<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
						:maxCount="10" :previewFullImage="true"></u-upload>
					<text style="color: #d7d0d2;">（可上传您喜欢的风格样片）</text>
				</u-form-item>
				<u-form-item label="备    注:" prop="remarks" borderBottom ref="item1">
					<u--textarea v-model="autonomouslyInfo.remarks" placeholder="您可以备注您喜欢的拍摄风格以及对摄影师的需求"
						autoHeight></u--textarea>
				</u-form-item>
			</u--form>

		</view>
		<!-- 定金 -->
		<view class="price">
			<u-button text="确定" size="large " color="#000">定金/费用：50元 待支付</u-button>
		</view>
	</view>
</template>

<script>
	var self, mapCtx
	import {
		formatTime
	} from '../../utils/formatTime.js'
	export default {
		onLoad() {
			self = this
			// 获取当前map
			mapCtx = wx.createMapContext('myMap')
			self.getAuthorizeInfo()
		},
		onReady() {
			//onReady 为uni-app支持的生命周期之一
			this.$refs.uForm.setRules(this.rules)
		},

		//相关配置参数
		data() {

			return {
				cardState: false,
				// 日历卡片显示
				showCalendar: false,
				// 拍摄时间
				shootingTime: '',
				modelDetails: {
					show: false,
					// 记录早中晚的预约情况
					info: [],
					date: "",
					// 用于预约已满时，提醒用户是否确认时存储数据使用
					change: ""
				},
				checkChange: false,
				// 初始化的中心位置
				latitude: 23.099994,
				longitude: 113.324520,
				// 标记点
				markers: [{
					id: 1,
					latitude: 23.099994,
					longitude: 113.324520,
					name: 'T.I.T 创意园'
				}],
				// 约拍信息
				autonomouslyInfo: {
					type: '',
					time: '',
					name: '',
					phone: '',
					remarks: '',
					upload: ''
				},
				// 约拍信息表单规则
				rules: {
					'type': {
						type: 'number',
						required: true,
						message: '请选择要拍摄的类型',
						trigger: ['blur', 'change']
					},
					'time': {
						type: 'string',
						required: true,
						message: '请选择约拍时间哦',
						trigger: ['blur', 'change']
					},
					'name': {
						type: 'string',
						required: true,
						message: '请填写姓名',
						trigger: ['blur', 'change']
					},
					'phone': {
						type: 'number',
						required: true,
						message: '请填写联系方式',
						trigger: ['blur', 'change']
					}
				},
				// 约拍类型
				radiolist: [
					'写真 ￥79.00 定金：￥50.00',
					'证件照 ￥39.00 定金：￥20.00'
				],
				// 上传照片
				fileList1: [{
						url: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
					},
					{
						url: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
					}
				],
			}

		},

		methods: {
			showCard() {
				this.cardState = true
			},
			closeCard() {
				this.cardState = false
			},
			// 平台联系商家
			contactShop(id) {
				uni.navigateTo({
					url: `/pages/message/messageroom/messageroom?id=${id}`
				})
			},
			formatter(day) {
				const d = new Date()
				let month = d.getMonth() + 1
				const date = d.getDate()
				if ((day.month === month && day.day >= date) || day.month > month) {
					/* 规则：查看源码 {@link /components/c-calendar/month.vue line 21}*/
					day.zao = Math.round(Math.random())
					day.zhong = Math.round(Math.random())
					day.wan = Math.round(Math.random())
				}
				return day
			},
			// 打印日期
			confirm(date, dayInfo) {
				this.modelDetails.info = [
					dayInfo.zao, dayInfo.zhong, dayInfo.wan
				]
				this.modelDetails.date = date
				this.modelDetails.show = true
			},
			// 关闭日期卡
			close() {
				this.showCalendar = false
			},
			change(item, index) {
				// 预约按钮
				if (item !== undefined && index !== undefined) {
					let period = !index ? '早' : (index === 1 ? '中' : '晚');
					this.modelDetails.change = this.modelDetails.date + ":" + period;
					// 预约满
					if (item) {
						this.checkChange = true;
					} else {
						this.shootingTime = this.modelDetails.change;
						this.modelDetails.show = false;
						this.showCalendar = false;
					}
				} 
				// 预约已满，用户确认是否强制预约
				else {
					this.shootingTime = this.modelDetails.change;
					this.checkChange = false;
					this.modelDetails.show = false;
					this.showCalendar = false;
				}
			},
			// 位置授权
			getAuthorizeInfo() {
				uni.authorize({
					scope: 'scope.userLocation',
					success() { // 允许授权
						self.getLocationInfo();
					},
					fail() { // 拒绝授权
						self.openConfirm();
						console.log("你拒绝了授权，无法获得周边信息")
					}
				})
			},
			// 获取地理位置
			getLocationInfo() {
				uni.getLocation({
					type: 'wgs84',
					success(res) {
						console.log(res, "当前位置");
						// 移动到当前位置
						self.toLocation(res)
						self.latitude = res.latitude;
						self.longitude = res.longitude;
					}
				});
			},
			// 再次获取授权
			// 当用户第一次拒绝后再次请求授权
			openConfirm() {
				uni.showModal({
					title: '请求授权当前位置',
					content: '需要获取您的地理位置，请确认授权',
					success: (res) => {
						if (res.confirm) {
							uni.openSetting(); // 打开地图权限设置
						} else if (res.cancel) {
							uni.showToast({
								title: '你拒绝了授权，无法获得周边信息',
								icon: 'none',
								duration: 1000
							})
						}
					}
				});
			},
			toLocation: function(obj) {
				// 改变地图中心位置
				mapCtx.moveToLocation(obj)
				// 移动标记点并添加动画效果
				mapCtx.translateMarker({
					markerId: 1,
					autoRotate: true,
					duration: 100,
					destination: {
						latitude: obj.latitude,
						longitude: obj.longitude,
					},
					animationEnd() {
						console.log('animation end')
					}
				})
			},
			// 
			poitap: function(e) {
				console.log(e, "poitap")
				var obj = e.detail
				self.toLocation(obj)
			},

			radioChange(index) {
				this.autonomouslyInfo.type = index
			},
			// 删除图片
			deletePic(event) {
				console.log(event);
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: 'http://192.168.2.21:7001/upload', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						formData: {
							user: 'test'
						},
						success: (res) => {
							setTimeout(() => {
								resolve(res.data.data)
							}, 1000)
						}
					});
				})

			}
		},
		computed: {
			isTime() {
				if (this.autonomouslyInfo.time === '') {
					return '请点击选择约拍时间'
				} else {
					return this.autonomouslyInfo.time
				}
			},
		},
	}
</script>

<style lang="scss">
	.concent {
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;

		.u-form-item__body__left {
			width: 80px !important;
			;
		}

		.info {
			background-color: $uni-bg-color;
			padding: 20rpx;
		}
	}

	.secend {
		background-color: white;
		width: 95%;
		display: flex;
		flex-direction: row;
		align-items: center;
		align-content: center;
		margin-bottom: 10px;
		border-radius: 8px;
	}

	.distance {
		border-style: solid;
		/* width: 55%;
		padding: 10px; */
	}

	.photo {
		min-width: 140px;
		max-width: 140px;
		max-height: 140px;
		min-height: 140px;
		border-radius: 70px;
		background: #aaffff;
		line-height: 65px;
	}

	.page-section-gap {
		box-sizing: border-box;
		padding: 0 30rpx;
	}

	.page-body-button {
		margin-bottom: 30rpx;
	}

	.block {
		margin-top: 20rpx;
		padding: 20rpx 30rpx;
		background-color: $uni-bg-color;
		border-radius: 10rpx;

		.contact {
			display: flex;
			justify-content: space-between;
			align-items: center;
			color: #8c8c8c;

			.right {
				display: flex;
				justify-content: space-evenly;
				align-items: center;
			}
		}

		.shootingTime {
			margin-top: 20rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.right {
				color: #8c8c8c;
			}
		}
	}

	.dialogCard {
		height: 500rpx;
		width: 720rpx;
		padding: 50rpx;
		box-sizing: border-box;

		.photoText {
			font-size: $uni-font-size-lg;
			margin: 20rpx 0;
		}

		.wxText {
			display: flex;
			justify-content: left;
			align-items: center;
			font-size: $uni-font-size-lg;
			margin: 20rpx 0;
			margin-bottom: 50rpx;
		}
	}
	
	.popu {
		font-size: 18px; 
		padding: 30px;
		
		.title {
			margin-left: 20px;
		}
		
		.content {
			padding: 5px 45px;
			
			.row {
				display: flex;
				justify-content: flex-start;
				margin: 5px;
				
				.item {
					margin-right: 10px;
					line-height: 28px;
				}
			}
		}
	}
</style>